<template>
  <transition name="page">
    <div class="wrapper">
      <component-back :title="title"></component-back>
      <van-pull-refresh v-model="isLoading"
                        @refresh="onRefresh"
                        :disabled="disabled"
                        :head-height="headHeight"
                        v-if="cardList.length">
        <common-scroll ref="scroll"
                       class="scroll"
                       @scrollend="handleScrollEnd"
                       :listenScroll="listenScroll">
          <div class="scroll-content">
            <div class="card-wrap">
              <swiper :options="swiperOption"
                      v-if="showSwiper"
                      ref="swiper">
                <!-- slides -->
                <swiper-slide v-for="(item, index) of cardList"
                              :key="item.id">
                  <div class="content"
                       aspectratio
                       w-600-300>
                    <img :src="item.background_img"
                         alt=""
                         aspectratio-content>
                    <div class="card-info-wrap">
                      <div class="card-info">
                        <div class="logo">
                          <div class="logo-wrap"></div>
                          <div class="vip">VIP特惠卡</div>
                        </div>
                        <div class="code"
                             @click="handleScan">
                          <div class="iconfont icon">&#xe74e;</div>
                        </div>
                      </div>
                      <div class="deadline">
                        <div class="deadline-content">{{card.times[index]}}</div>
                        <div class="card-type">{{item.card_type}}</div>
                      </div>
                    </div>
                  </div>
                </swiper-slide>
                <!-- Optional controls -->
              </swiper>
              <ul class="use-detail"
                  v-if="showSwiper">
                <li class="use">
                  <div class="may-use use-title">可使用(次)</div>
                  <div class="number">{{card.use[index].may}}</div>
                </li>
                <li class="use">
                  <div class="already-use use-title">已使用(次)</div>
                  <div class="number">{{card.use[index].used}}</div>
                </li>
                <li class="use">
                  <div class="residue-use use-title">剩余(次)</div>
                  <div class="number">{{card.use[index].residue}}</div>
                </li>
              </ul>
            </div>
            <div class="card-activity">活动介绍</div>
            <div class="activity-content">{{card.activity[index]}}</div>
            <van-popup v-model="show"
                       v-if="card.codeList.length">
              <img :src="card.codeList[index]"
                   alt="">
            </van-popup>
          </div>
        </common-scroll>
      </van-pull-refresh>
    </div>
  </transition>
</template>

<script>
import ComponentBack from 'common/back'
import {
  Toast
} from 'vant'
export default {
  name: 'MeLike',
  components: {
    ComponentBack
  },
  data () {
    return {
      title: '我的特赞卡',
      swiperOption: {
        // loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 10,
        on: {
          slideChangeTransitionEnd: () => {
            const index = this.$refs.swiper.swiper.realIndex
            this.index = index
          }
        }
      },
      cardList: [],
      index: 0,
      show: false,
      isLoading: false, // 是否刷新中
      disabled: false, // 是否下拉刷新
      scrollHeight: 100, // 滚动高度
      headHeight: 100 // 下拉刷新高度
    }
  },
  methods: {
    // 下拉刷新
    onRefresh () {
      const msg = '刷新成功'
      this.cardList = []
      this.getLikeData()
      setTimeout(() => {
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      }, 500)
    },
    getLikeData () {
      this.$api.person.getLikeData()
        .then(this.getLikeDataSucc)
    },
    getLikeDataSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.cardList = data.card
        this.isLoading = false
        this.index = 0
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    // transformData (date) {
    //   date = new Date(date * 1000).toLocaleDateString()
    //   let month = new Date(date).getMonth() + 1
    //   let year = new Date(date).getFullYear()
    //   let day = new Date(date).getDate()
    //   month = this.zeroFill(month)
    //   day = this.zeroFill(day)
    //   const time = `${year}/${month}/${day}`
    //   return time
    // },
    // 补零
    // zeroFill (date) {
    //   date = date < 10 ? `0${date}` : date
    //   return date
    // },
    // 核销
    handleScan () {
      this.show = !this.show
    },
    handleScrollEnd (pos) {
      this.scrollHeight = -pos.y
    }
  },
  computed: {
    showSwiper () {
      return this.cardList.length
    },
    // 卡的时间和使用次数
    card () {
      const result = []
      const use = []
      const activity = []
      const codeList = []
      this.cardList.map((item) => {
        let startTime = item.payed_at
        let endTime = item.end_at
        result.push(`${startTime}-${endTime}`)
        use.push({
          may: item.discount,
          used: item.used_times,
          residue: item.discount - item.used_times
        })
        activity.push(item.desc)
        codeList.push(item.order_no)
      })
      return {
        times: result,
        use,
        activity,
        codeList
      }
    }
  },
  created () {
    this.getLikeData()
    this.listenScroll = true
  },
  watch: {
    scrollHeight (newY) {
      this.disabled = newY > 0
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper >>> .van-pull-refresh__track
  width 100%
  height 100vh

.wrapper >>> .swiper-container
  height 300px
  width 100%
  margin-top 36px
  margin-bottom 43px

.wrapper >>> .swiper-container .swiper-slide
  width 600px
  border-radius 20px

.wrapper >>> .swiper-container .swiper-wrapper .swiper-slide .content
  width 600px
  height 300px
  position relative
  border-radius 20px

.wrapper
  position absolute
  z-index 10
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc
  touch-action none

  .card-wrap
    padding-top 88px
    box-sizing border-box
    padding-bottom 44px

    .card-info-wrap
      position absolute
      top 0
      left 0
      padding()
      padding-top 26px
      padding-bottom 26px
      height 100%
      width 100%

      .card-info
        width 100%
        display flex
        justify-content space-between
        margin-bottom 112px

        .logo-wrap
          width 160px
          height 18px
          bgckImg('~@/assets/images/logo_black.png', center, center)
          margin-bottom 60px

          .vip
            font-size $shop_name
            font-weight bold
            color $order_content

        .code
          font-size 52px
          color $order_content

          .icon
            font-size 52px

      .deadline
        display flex
        width 100%
        justify-content space-between

        .deadline-content, .card-type
          font-size $address
          font-weight 500
          color $order_content

    .use-detail
      display flex
      width 100%

      .use
        flex 1
        text-align center

        .use-title
          font-size $address
          font-weight 400
          color $use_color
          line-height 54px

        .number
          font-size $shop_name
          font-weight 400
          color $use_number
          line-height 58px

  .card-activity
    width 747px
    height 56px
    background $space
    font-size $address
    font-weight 500
    color $order_content
    line-height 56px
    text-indent 24px

  .activity-content
    padding()
    padding-top 30px
    font-size $shop_name
    font-family PingFang-SC-Regular
    font-weight 400
    color $activity_color
    line-height 42px

.page-enter-active, .page-leave-active
  transition all 0.3s

.page-enter, .page-leave-active
  transform translate3d(100%, 0, 0)
</style>
